<template>
    <div class="MusicForm">
        <div class="header">
            <div class="bg" :style="{backgroundImage: `url(${bgUrl})`}"></div>
            <div class="header-warp">
                <div class="left">
                    <img :src="$route.params.picUrl" alt="">
                    <span>歌单</span>
                    <i>{{$route.params.playCount|filterNum}}</i>
                </div>
                <div class="right">
                    <h2>{{name}}</h2>
                    <div class="author">
                        <router-link to="/musicForm">
                            <div class="head">
                                <img :src="avatarUrl" alt="">
                            </div>
                            {{nickname}}
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
        <h3 class="title">歌曲列表</h3>
        <div style="position: relative">
            <ul>
                <Listitem v-for="(item,i) in musicList" :key="i" :item="item">
                    <div class="num">{{(i + 1)}}</div>
                </Listitem>
            </ul>
            <Loading v-show="musicList.length <= 0" />
            <div class="more-warp" v-show="musicList.length > 0">
                <div class="more-text">查看更多歌曲，请下载客户端</div>
            </div>
        </div>
        <!-- 最新评论 -->
        <div class="comment-title">最新评论({{total}})</div>
        <div class="cmt-list">
            <Commentitem v-for="item in comments" :key="item.commentId" :item="item"/>
        </div>
        <Loading v-show="comments.length <= 0" />
    </div>
</template>

<script>
import Listitem from '../components/Listitem'
import Loading from '../components/Loading'
import Commentitem from '../components/Commentitem'
export default {
    name: 'MusicForm',
    components: {
        Listitem,
        Loading,
        Commentitem
    },
    data() {
        return {
            musicList: [],
            nickname: '',
            avatarUrl: '',
            name: '',
            bgUrl: '',
            total: '',
            comments: []
        }
    },
    props: ['id'],
    beforeRouteEnter(to, from, next) {
        next(vm=>{
            let trackIds = [];
            vm.musicList = [];
            vm.axios.get('/playlist/detail?id=' + vm.id).then((response)=>{
                // console.log(response.data);
                vm.nickname = response.data.playlist.creator.nickname;
                vm.avatarUrl = response.data.playlist.creator.avatarUrl;
                vm.name = response.data.playlist.name;
                vm.bgUrl = response.data.playlist.coverImgUrl;
                trackIds = response.data.playlist.trackIds;
                trackIds = trackIds.slice(0,10);
            })
            .then(()=>{
                for (let v of trackIds) {
                    vm.axios.get('/song/detail?ids=' + v.id).then(response=> {
                        // console.log(response);
                        vm.picUrl = response.data.songs[0].al.picUrl;
                        vm.musicList.push({
                            name: response.data.songs[0].name,
                            id: response.data.songs[0].id,
                            song: {
                                privilege: {
                                    maxbr: response.data.privileges[0].maxbr
                                },
                                artists: [
                                    {name: response.data.songs[0].ar[0].name}
                                ]
                            }
                        })
                    })
                }
            });
            vm.axios.get('/comment/playlist?id=' + vm.id).then((response)=>{
                // console.log(response);
                vm.total = response.data.total;
                vm.comments = response.data.comments;
            })
        }) 
    },
    filters: {
        filterNum(value) {
            return (value / 10000).toFixed(1) + "万";
        },
        fixNum(n) {
            return n < 10 ? '0' + n : n;
        }
    },
}
</script>

<style lang="less" scoped>
.MusicForm {
    padding-bottom: 50px;
}
.header {
    position: relative;
    height: 130px;
    padding: 30px 15px;
    overflow: hidden;
    box-sizing: content-box;
    .bg {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        // background-image: url(../assets/img1.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        filter: blur(20px);
        transform: scale(1.5);
        &::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 3;
            background-color: rgba(0,0,0,.25);
        }
    }
    .header-warp {
        display: flex;
        position: relative;
        z-index: 2;
        .left {
            position: relative;
            width: 126px;
            height: 126px;
            img {
                width: 100%;
                display: block;
            }
            span {
                position: absolute;
                z-index: 3;
                top: 10px;
                left: 0;
                padding: 0 8px;
                height: 17px;
                color: #fff;
                font-size: 9px;
                text-align: center;
                line-height: 17px;
                background-color: rgba(217,48,48,.8);
                border-top-right-radius: 17px;
                border-bottom-right-radius: 17px;
            }
            i {
                position: absolute;
                right: 5px;
                top: 2px;
                z-index: 3;
                color: #fff;
                font-size: 12px;
                text-shadow: 1px 0 0 rgba(0, 0, 0, 0.15);
                background-image: url(../assets/erji.svg);
                background-size: 11px 10px;
                background-position: 0 4px;
                background-repeat: no-repeat;
                padding-left: 13px;
                font-style: normal;
            }
            &::after {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 20px;
                z-index: 2;
                background-image: linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,0));
            }
        }
        .right {
            flex: 1;
            margin-left: 16px;
            text-align: left;
            h2 {
                height: 44px;
                font-style: 17px;
                color: #fefefe;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .author {
                margin-top: 20px;
                a {
                    display: inline-block;
                    color: hsla(0,0%,100%,.7);
                    font-size: 14px;
                    text-decoration: none;
                    .head {
                        display: inline-block;
                        width: 30px;
                        height: 30px;
                        margin-right: 5px;
                        border-radius: 50%;
                        overflow: hidden;
                        vertical-align: middle;
                        img {
                            width: 100%;
                            display: block;
                        }
                    }
                }
            }
        }
    }
}
.title {
    height: 23px;
    line-height: 23px;
    font-size: 12px;
    padding: 0 10px;
    color: #666;
    background-color: #eeeff0;
    text-align: left;
}
.num {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    font-size: 17px;
    color: #999;
    margin-left: -10px;
}
.more-warp {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    height: 194px;
    background-image: linear-gradient(180deg,hsla(0,0%,97.3%,.7),#f8f8f8 60%);
    .more-text {
        margin-top: 137px;
        color: #999;
        font-size: 14px;
    }
}
.comment-title {
    height: 23px;
    line-height: 23px;
    padding: 0 10px;
    background-color: rgba(0,0,0,.05);
    font-size: 12px;
    color: #666;
    text-align: left;
}
</style>
